//职位模块
import React, { Component } from 'react'
import {
    View,
    Text,
    TouchableOpacity,
    Animated,
    BackHandler,
    ToastAndroid,
} from 'react-native';


import ScrollableTabView, {
    DefaultTabBar, ScrollableTabBar
} from 'react-native-scrollable-tab-view';
import { is, fromJS } from 'immutable';

import { connect } from '../../utils/dva';
import TabBar from '../../utils/TabBar'
import Back from '../../HOC/Back'

import Home from './Home'
import Two from './Two'

var AnimatedValues = [new Animated.Value(0.9), new Animated.Value(0.9), new Animated.Value(0.9), new Animated.Value(0.9)];
var tabNames = ['Home', 'Tab2', 'Tab3', 'Tab4'];
var tabIconNames = ['ios-paper', 'ios-albums', 'ios-paper', 'ios-albums'];


// @Back()
@connect(({ global }) => ({
    nav_index: global.nav_index
}))
export default class App extends Component {

    set_tab = (i) => {
        const { dispatch } = this.props
        dispatch({                   //发起调度
            type: 'global/set_nav_index',
            payload: {
                nav_index: i,
            },
        })
    }
    shouldComponentUpdate(nextProps, nextState) {
        return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    }
    render() {
        const { nav_index } = this.props
        return (
            <ScrollableTabView
                tabBarPosition='bottom'       //导航位置
                initialPage={0}               //初始化选中下标
                page={nav_index}              //选中的下标 
                renderTabBar={() => <TabBar tabNames={tabNames} tabIconNames={tabIconNames} set_tab={this.set_tab} AnimatedValues={AnimatedValues} />}
                onChangeTab={(data) => {        //当改变选项卡时候触发的毁掉函数data里有俩参数 i ref
                    this.set_tab(data.i)        //改变下标
                }}
                onScroll={(data) => {           //当视图正在滑动时候触发包含一个Float类型的数字，范围是[0, tab数量-1]

                }}
            >

                <Home tabLabel='Tab1' {...this.props}></Home>
                <Two tabLabel='Tab2' {...this.props}></Two>
                <Text tabLabel='Tab3' {...this.props}>我是首页哦222</Text>
                <Text tabLabel='Tab4' {...this.props}>我是首页222222哦</Text>
            </ScrollableTabView>
        )
    }
}
